<template>
<!-- 基本信息 -->
    <div class="infor">
        <van-nav-bar  title="基本信息"  right-text="编辑"  @click-right="disabled = false"  left-arrow @click-left="$router.go(-1)"/>
        <div class="form">
            <!-- 姓 名 -->
            <div class='enroll-item'>
                <div class='item-title'>姓 名</div>
                <!-- <div class='item-xing'>*</div> -->
                <input class='item-content' type='text' v-model="userInfo.nickName" placeholder='请输入姓名' :disabled="disabled" />
            </div>
            <!-- 姓 别 -->
            <div class='enroll-item'>
                <div class='item-title'>性 别</div>
                <!-- <div class='item-xing'>*</div> -->
                <van-radio-group v-model="sex" class="radio item-content" :disabled="disabled">
                    <van-radio name="1" class="namn" checked-color="#D33043">男</van-radio>
                    <van-radio name="2" class="woman" checked-color="#D33043">女</van-radio>
                </van-radio-group>
            </div>
            <!-- 出生年月 -->
            <div class='enroll-item' @click="dateTime">
                <div class='item-title'>出生年月</div>
                <!-- <div class='item-xing'>*</div> -->
                <input class='item-content' type='text' v-model="userInfo.userBirth" placeholder='请选择' disabled="disabled" />
            </div>
            <!-- 移动电话 -->
            <div class='enroll-item'>
                <div class='item-title'>移动电话</div>
                <!-- <div class='item-xing'>*</div> -->
                <input class='item-content' type='text' v-model="userInfo.userPhone" placeholder='请输入电话' :disabled="disabled" />
            </div>
            <!-- 移动电话 -->
            <div class='enroll-item phon' @click="shequClick()">
                <div class='item-title'>社区选择</div>
                <!-- <div class='item-xing'>*</div> -->
                <input class='item-content' type='text' v-model="userInfo.commName" placeholder='请选择社区' disabled="disabled" />
            </div>
            <button v-if="disabled == false" class="inforBtn" @click="inforBtn">保存完善信息</button>
        </div>
        <van-popup v-model="showDatetime" position="bottom">
            <van-datetime-picker title="请选择出生年月"
              v-model="currentDate" 
              type="date" 
              :max-date="maxDate" 
              :min-date="minDate"
              @confirm="timeTrue" 
              @cancel="showDatetime = !showDatetime" 
            />
        </van-popup>
        <van-popup v-model="shequ" position="bottom">
            <van-picker 
            :columns="columns" 
            show-toolbar
             @confirm="shequTrue" 
             @cancel="shequ = !shequ" 
             />
        </van-popup>
    </div>
</template>
<script>
import apiHttp from '../../../../api/index'
import { Toast,Popup,DatetimePicker } from 'vant';
export default {
    data(){
        return{
            disabled:false,
            userInfo:{},
            minDate:new Date(1920, 1, 1),
            maxDate: new Date(),
            currentDate: new Date(),
            showDatetime:false,
            sex:'1',
            columns:[],
            columnsArr:[],
            commId:'',
            shequ:false,
            userId:sessionStorage.getItem('userId')
        }
    },
    mounted(){
        this.getUserInfo()
        this.getCommList()
        var u = navigator.userAgent, app = navigator.appVersion
        var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
        $(document).ready(function(){
          $("input").blur(function(){
            if (isIOS) {
              blurAdjust()
            }
          });
        });
        // 解决苹果不回弹页面
        function blurAdjust(e){
          setTimeout(()=>{
            if(document.activeElement.tagName == 'INPUT' || document.activeElement.tagName == 'TEXTAREA'){
              return
            }
            let result = 'pc';
            if(/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { //判断iPhone|iPad|iPod|iOS
                result = 'ios'
            }else if(/(Android)/i.test(navigator.userAgent)) {  //判断Android
                result = 'android'
            }
            
            if( result = 'ios' ){
              document.activeElement.scrollIntoViewIfNeeded(true);
            }
          },100)
        }

      },
    watch:{
        sex(newVal,oldVal){
            this.userInfo.userSex = newVal
        }
    },
    methods:{
        // 获取社区列表
        getCommList(){
            let self = this
            apiHttp.comIndex.getCommList('',resp=>{
              console.log(resp)
                if(resp.resultCode == '000000'){
                    for(let i = 0; i < resp.data.commApartList.length; i++){
                        self.columns.push(resp.data.commApartList[i].commName)
                    }
                    self.columnsArr = resp.data.commApartList
                }else{
                    Toast(resp.resultMsg)
                }
            })
        },
        shequClick(){
            if(this.disabled == false){
                this.shequ = !this.shequ
            }
        },
        shequTrue(value, index){
            for(let i = 0; i < this.columnsArr.length; i++){
                if(this.columnsArr[i].commName == value){
                    this.commId = this.columnsArr[i].commId
                    this.userInfo.commName = this.columnsArr[i].commName
                }
            }
            this.shequ = !this.shequ
        },
        dateTime(){
            if(this.disabled == false){
                this.showDatetime = !this.showDatetime
            }
        },
        formatTen(num) { 
            return num > 9 ? (num + "") : ("0" + num); 
        },
        timeTrue(){
            let date = this.currentDate
            var year = date.getFullYear(); 
            var month = date.getMonth() + 1; 
            var day = date.getDate(); 
            var hour = date.getHours(); 
            var minute = date.getMinutes(); 
            var second = date.getSeconds(); 
            this.userInfo.userBirth = year + "-" + this.formatTen(month) + "-" + this.formatTen(day); 
            this.showDatetime = !this.showDatetime
        },
        // 基本信息
        getUserInfo(){
            let parmes = {
                userId:sessionStorage.getItem('userId')
            }
            apiHttp.comIndex.getUserInfo(parmes,resp=>{
                if(resp.resultCode == '000000'){
                    this.userInfo.userId = resp.data.user.id
                    this.userInfo.nickName = resp.data.user.nickname
                    this.userInfo.userSex = resp.data.user.userSex.toString()
                    this.userInfo.userBirth = resp.data.user.userBirth
                    this.userInfo.userPhone = resp.data.user.userPhone
                    this.userInfo.commName = resp.data.user.commName
                    this.disabled = true
                    this.sex = this.userInfo.userSex
                    this.commId = resp.data.user.commId
                }
            })
        },
        // 保存信息
        inforBtn(){
            let parmes = this.userInfo
            parmes.commId = this.commId
            let reg=11 && /^((13|14|15|17|18|19|16)[0-9]{1}\d{8})$/
            if(parmes.userPhone==''){
                Toast("请输入手机号码")
                return
            }else if(!reg.test(parmes.userPhone)){
                Toast("手机格式不正确")
                return
            }else if(parmes.userBirth==''){
                Toast("请选择出生年月")
                return
            }
            if(parmes.nickName == ''){
                Toast("姓名不能为空")
                return
            }
            apiHttp.comIndex.updateUser(parmes,resp=>{
                if(resp.resultCode == '000000'){
                    Toast('修改成功')
                    this.$router.go(-1)
                }
            })
        }
    }
}
</script>
<style scoped>
input::-webkit-input-placeholder{
    color: #ccc;
}
.form{
    width: 92%;
    margin: 0 auto;
    background-color:#fff;
    font-size: 0.7rem;
    margin-top: 0.4rem;
}
.enroll-item {
    display: flex;
    flex-direction: row;
    padding: 0 0.5rem;
    height: 2rem;
    flex-wrap: nowrap;
    align-items: center;
    width: 92%;
    margin: 0 auto;
    border-bottom: 1px solid #D8D8D8;
}
.phon{
    border-bottom: 0px;
}
.item-title {
    font-size: 30rpx;
    color: #000000;
    white-space: nowrap;
}
.item-content {
    background-color: transparent;
    color: #000000;
    flex: 1;
    text-align: right;
}
input{
    border:none;
}
.inforBtn{
    bottom: 1rem;
    position: fixed;
    border: none;
    width: 90%;
    line-height: 1.8rem;
    border-radius: 6px;
    background-color: #D33043;
    color: #FFFFFF;
    font-size: 0.8rem;
}
.namn,.woman{
    display: inline-block;
}
</style>